<template>
  <view class="oa-content">
    
    
    <view class="" style="padding-bottom: 240rpx;">
      
      <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
          <view class="justify-content-item tn-flex-1">
            <view class="tn-text-bold tn-text-lg">
              设备类型 <text class="tn-color-red tn-padding-left-xs">*</text>
            </view>
            <view class="tn-color-gray tn-padding-top-xs" v-if="index===99">
              请选择
            </view>
            <view class="tn-color-black tn-padding-top-xs" v-else>
              {{array[index]}}
            </view>
          </view>
          <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
            <view class="tn-icon-right tn-padding-top"></view>
          </view>
        </view>
      </picker>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            设备名称 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs tn-color-black">
            <input placeholder="请输入" name="input" placeholder-style="color:#AAAAAA" value=""></input>
          </view>
        </view>
        <view class="justify-content-item tn-text-xl tn-color-grey tn-margin-left">
          <view class="tn-icon-edit tn-padding-top"></view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            设备数量 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs tn-color-black">
            <input placeholder="请输入" name="input" placeholder-style="color:#AAAAAA" value=""></input>
          </view>
        </view>
        <view class="justify-content-item tn-text-xl tn-color-grey tn-margin-left">
          <view class="tn-icon-edit tn-padding-top"></view>
        </view>
      </view>
      
      
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
        <view class="tn-flex justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            设备用途 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
        </view>
        <view class="tn-flex justify-content-item tn-color-gray">
          200字内
        </view>
      </view>
      <view class="tn-bg-gray--light tn-padding tn-text-justify" style="border-radius: 10rpx;margin: 0 30rpx 30rpx 30rpx;">
        <textarea maxlength="500" placeholder="请简单写一下设备事由" placeholder-style="color:#AAAAAA" style="height: 160rpx;width: 100%;"></textarea>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-strip-top">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            审批人员 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            请选择
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
          <view class="tn-icon-my-add tn-padding-top"></view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-padding">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            抄送人员 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            请选择
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
          <view class="tn-icon-my-add tn-padding-top"></view>
        </view>
      </view>
      
      
      
      <!-- 悬浮按钮-->
      <view class="tn-flex tn-footerfixed tn-padding">
        <view class="tn-flex-1 justify-content-item tn-text-center">
          <tn-button backgroundColor="#00C8B0 " padding="40rpx 0" width="60%" :fontSize="28" fontColor="#FFFFFF" shape="round" @click="tn('/workPages/prompt')">
            <text class="">提交申请</text>
          </tn-button>
        </view>
      </view>
      
      
      
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateDevice',
    mixins: [template_page_mixin],
    data(){
      return {
        index: 99,
        array: ['个人设备', '部门设备', '公司设备', '其他用途'],
        
      }
    },
    methods: {
      bindPickerChange: function(e) {
        this.index = e.detail.value
      },

      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      // 手动上传文件
      upload() {
        this.$refs.imageUpload.upload()
      },
      // 图片拖拽重新排序
      onSortList(list) {
        console.log(list);
      },
      
      // 视频选择
      videoChooseHandle() {
        uni.chooseVideo({
          success: (res) => {
            // 上传完成后再把视频地址填写到这里，这里只是临时测试用
            this.videoUrl = res.tempFilePath
          }
        })
      },
      // 重新选择视频
      reChooseVideo() {
        this.videoUrl = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
	.oa-content{
		height: 100vh;
		background-color: #FFFFFF;
	}
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 32rpx;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
  }
  
  
  .video-choose {
    position: relative;
    width: calc(100% - 60rpx);
    height: 340rpx;
    background-color: #f8f7f8;
    color: #838383;
    border-radius: 10rpx;
    margin: 10rpx 0 30rpx 30rpx;
    
    .choose-operation {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: inherit;
      
      .icon {
        font-size: 70rpx;
        line-height: 1;
        padding: 20rpx;
      }
      .tips {
        line-height: 1;
      }
    }
    
    .video-preview {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      .video-container {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
      
      .remove-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        border-top: 60rpx solid;
        border-left: 60rpx solid transparent;
        border-top-color: rgba(0,0,0,0.1);
        width: 0rpx;
        height: 0rpx;
        
        &--icon {
          position: absolute;
          top: -50rpx;
          right: 6rpx;
          color: #FFFFFF;
          font-size: 24rpx;
          line-height: 1;
        }
      }
    }
  }
  
  /* 间隔线 start*/
  .tn-strip-bottom-min {
    width: 100%;
    border-bottom: 1rpx solid #F8F9FB;
  }
  
  .tn-strip-top {
   width: 100%;
   border-top: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/
   
   /* 底部悬浮按钮 start*/
   .tn-tabbar-height {
   	min-height: 160rpx;
   	height: calc(180rpx + env(safe-area-inset-bottom) / 2);
     height: calc(180rpx + constant(safe-area-inset-bottom));
   }
   .tn-footerfixed {
     position: fixed;
     width: 100%;
     bottom: calc(40rpx + env(safe-area-inset-bottom));
     z-index: 1;
     box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
   }
   /* 底部悬浮按钮 end*/
</style>
